<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>

    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/cart.css">
    <link rel="stylesheet" href="/iconfont/iconfont.css">
    <link rel="shortcut icon" href="/icon/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="/css/reset.css">
<!--    <link rel="stylesheet" href="/layui-v2.6.8/layui/css/layui.css">-->
    <link rel="stylesheet" href="/css/loading.css">
    <link rel="stylesheet" href="/layui/css/layui.css">

</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="h-con w">
            <div class="h-title">
                <a href="/index.html">
                    <div class="logo fl">
                    </div>
                </a>
                <h1>我的购物车</h1>
            </div>
            <div class="h-info" th:if="${session.currentMember==null} ">
                <a href="/login">登录</a>
                <span>|</span>
                <a href="/register">注册</a>
            </div>
            <div class="h=info" th:if="${session.currentMember!=null}">
                <a href="/personal" th:text="${session.currentMember.username}"></a>
            </div>
        </div>
    </header>
    <!-- 购物区 -->
    <section>
        <div class="s-con w">
            <div class="cart clearfix"  th:if="${session.currentMember==null}">
                <div class="cart-bg fl"></div>
                <div class="cart-info fl">
                    <h2>你的购物车还是空的!</h2>
                    <p>登录后将显示您之前加入的商品</p>
                    <div class="cart-btns">
                        <a href="/login">
                            <div class="cart-btn cart-login fl">
                                立即登录
                            </div>
                        </a>
                        <a href="/">
                            <div class="cart-btn cart-register fl">
                                马上去购物
                            </div>
                        </a>
                    </div>
                </div>
            </div>

<!--             购物车选项-->
            <table>
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="checkAll" />
                        </th>
                        <th style="width: 40px;">id </th>
                        <th style="width: 120px;"> 图片</th>
                        <th style="width: 380px;">商品名称</th>
                        <th style="width: 158px;">单价 </th>
                        <th style="width: 210px;"> 数量</th>
                        <th style="width: 200px;">小计</th>
                        <th style="width: 80px;">操作</th>
                    </tr>
                </thead>
                <tbody id="tab"></tbody>
            </table>

            <!-- 合计 -->
            <form action="/cart/confirm" method="post" target="_self">
                <input type="hidden" name="ids" id="ids" />
            <div class="cart-bar">
                <p class="fl">共<span class="buy-number"></span>件商品</p>

                <button class="pay fr" >去结算</button>
                <p class="fr">合计：<span class="total-money"></span>元</p>
            </div>
            </form>
        </div>
    </section>




    <section>
        <div class="r-con w">
            <div class="recommend">
                <div class="r-title pos-r">
                    <h3>为您推荐</h3>
                </div>
                <ul class="r-items">
                    <li class="item">
                        <img src="/img/推荐1.webp" alt="">
                        <p class="item-name">Note 9 4G</p>
                        <p class="item-price">899元</p>
                        <p class="item-praise">10.4万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>


                    <li class="item ">
                        <img src="/img/推荐2.webp" alt="">
                        <p class="item-name">Note 9 5G</p>
                        <p class="item-price">1199元</p>
                        <p class="item-praise">72.5万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="/img/推荐3.webp" alt="">
                        <p class="item-name">Redmi Note 10 Pro</p>
                        <p class="item-price">1599元</p>
                        <p class="item-praise">23.3万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="/img/推荐4.webp" alt="">
                        <p class="item-name">Redmi K40 游戏增强版</p>
                        <p class="item-price">1999元</p>
                        <p class="item-praise">8.5万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="/img/推荐5.webp" alt="">
                        <p class="item-name">Redmi 9A</p>
                        <p class="item-price">499元</p>
                        <p class="item-praise">66.8万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="/img/推荐6.webp" alt="">
                        <p class="item-name">Note 9 Pro 5G</p>
                        <p class="item-price">1399元</p>
                        <p class="item-praise">72.5万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="/img/推荐7.webp" alt="">
                        <p class="item-name">小米11</p>
                        <p class="item-price">3799元</p>
                        <p class="item-praise">23万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="/img/推荐8.webp" alt="">
                        <p class="item-name">Redmi K40</p>
                        <p class="item-price">1999元</p>
                        <p class="item-praise">56.2万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="/img/推荐9.webp" alt="">
                        <p class="item-name">黑鲨4</p>
                        <p class="item-price">2499元</p>
                        <p class="item-praise">7.9万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="/img/推荐10.webp" alt="">
                        <p class="item-name">Redmi Note 10 5G</p>
                        <p class="item-price">1099元</p>
                        <p class="item-praise">23.3万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="/img/推荐11.webp" alt="">
                        <p class="item-name">Redmi K40 Pro+</p>
                        <p class="item-price">3399元</p>
                        <p class="item-praise">56.2万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="/img/推荐12.webp" alt="">
                        <p class="item-name">Redmi K40 Pro</p>
                        <p class="item-price">2499元</p>
                        <p class="item-praise">56.2万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>


                    <li class="item ">
                        <img src="/img/推荐13.webp" alt="">
                        <p class="item-name">黑鲨4 Pro</p>
                        <p class="item-price">3999元</p>
                        <p class="item-praise">7.9万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="/img/推荐14.webp" alt="">
                        <p class="item-name">小米10S</p>
                        <p class="item-price">2999元</p>
                        <p class="item-praise">14.7万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>


                    <li class="item ">
                        <img src="/img/推荐15.webp" alt="">
                        <p class="item-name">Redmi K30 至尊纪念版</p>
                        <p class="item-price">1999元</p>
                        <p class="item-praise">61.8万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="/img/推荐16.webp" alt="">
                        <p class="item-name">腾讯黑鲨游戏手机3S</p>
                        <p class="item-price">3999元</p>
                        <p class="item-praise">2.8万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="/img/推荐17.webp" alt="">
                        <p class="item-name">小米11 青春版</p>
                        <p class="item-price">2099元</p>
                        <p class="item-praise">8.9万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="/img/推荐18.webp" alt="">
                        <p class="item-name">小米11 Pro</p>
                        <p class="item-price">4499元</p>
                        <p class="item-praise">6.9万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="/img/推荐19.webp" alt="">
                        <p class="item-name">Xiaomi MIX 4</p>
                        <p class="item-price">4999元</p>
                        <p class="item-praise">1810人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="/img/推荐20.webp" alt="">
                        <p class="item-name">小米11 Uitra</p>
                        <p class="item-price">5499元</p>
                        <p class="item-praise">7.4万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </section>
    <script src="/js/jquery.min.js"></script>
    <script src="/layui/layui.js" ></script>
    <script src="/js/cart.js"></script>

    <script src="/js/template-web.min.js"></script>
    <script src="/js/loading.js"></script>

    <script type="text/javascript">
            layui.use(["laytpl"],function (){
                var laytpl=layui.laytpl;
                var $ =layui.jquery;
                $("table").show();
                $(".cart-bar").show();
                //修改数量的函数
                var updateAmount= function (cartid,num){
                    $.post("/cart/updateAmount",{cartid: cartid,num:num},function(){
                        console.log(cartid);
                        console.log(num);
                    });
                }
                //加载购物车的函数
                var loadCart=function (){
                $.get("/cart/list2",function (carts){
                    laytpl($("#tpl").html()).render(carts,function (ht) {
                        $("#tab").append(ht);
                    });
                });};
                loadCart();
                 //结算个数和总和的函数
                var count=function (){
                    var sum=0;
                    var number=0;
                    var ids="";
                    $.each($(".sel:checked"),function(i,v){
                        number+=1;
                        sum += parseInt($(this).parents("tr").children().eq(6).text());
                        if (ids!=""){
                            ids+=",";
                        }
                        ids+=$(this).parents("tr").children().eq(1).text();
                    });
                    $("#ids").val(ids);
                    $(".buy-number").text(number);
                    $(".total-money").text(sum);
                }
                count();
                //减法
                $("#tab").on("click", ".sub", function () {
                    let num = $(this).next().val();
                    num--;
                    if (num <= 1) {
                        num = 1;
                    }
                    $(this).next().val(num);
                    //let price = $(this).parents("tr").children().eq(3).text();
                    let price= $(this).parents("tr").children().eq(4).text();

                    //$(this).parents("tr").children().eq(5).text(num * price);
                    $(this).parents("tr").children().eq(6).text(num * price);
                    let _this=$(this);
                    //loadCart();
                    var cartid=_this.parent().parent().attr("cartid");
                    updateAmount(cartid,num);
                });
                //加法
                $("#tab").on("click", ".add", function () {
                    let num = $(this).prev().val();
                    num++;
                    $(this).prev().val(num);
                    let price = $(this).parents("tr").children().eq(4).text();
                    $(this).parents("tr").children().eq(6).text(num * price);
                    let _this=$(this);
                    //let cartid=_this.parents("tr").children().eq(1).val();
                    var cartid=_this.parent().parent().attr("cartid");
                   // loadCart();
                    updateAmount(cartid,num);
                });
                //全选
                $('#checkAll').click(function(event) {
                    var tr_checkbox = $('table tbody tr').find('input[type=checkbox]');
                    tr_checkbox.prop('checked', $(this).prop('checked'));
                    // 阻止向上冒泡，以防再次触发点击操作
                    event.stopPropagation();
                    count();
                });
                $("body").on("click",".sel",function (){
                    count();
                })

                //找到所有class是del的元素绑定事件
                $("body").on("click",".del",function (){
                    let _this=$(this);
                 // let cartid= _this.parent().parent().attr("cartid");
                   //let cartid=_this.parents().children().eq(1).text();
                    var cartid=_this.parent().parent().attr("cartid");
                    //发送删除请求
                    $.post("/cart/del",{cartid:cartid},function (){
                        _this.parent().parent().parent().children().remove();
                        loadCart();
                    });
                });
            });

        </script>
    <script type="text/html" id="tpl">

        {{# layui.each(d,function(i,v){ }}
        <tr cartid="{{v.id}}"><td >
            <input type="checkbox"class="sel"/>
        </td>
            <td>{{v.id}}</td>
            <td><img width="70px" height="70px" src="{{v.productImg}}"alt="" ></td>
            <td>{{v.productName}}</td>
            <td>{{v.price}}</td>
            <td>
                <button class='sub'>-</button>
                <input value="{{v.amount}}">
                <button class='add'>+</button>
                </td>
            <td>{{v.amount*v.price}}</td>
            <td><i class="del iconfont icon-cha"></i></td>

        </tr>
        {{# });}}

    </script>


    <script>

        
      
     
    








      
    </script>

</body>

</html>